<template>
  <div class="atlas" v-loading="loading">
    <div class="center-board">
      <div class="center-title">
        <h3>关系图谱</h3>
      </div>
      <div class="action-bar mb-[20px]">
        <el-button icon="Back" type="primary" plain text @click="backTo">返回</el-button>
      </div>
    </div>
    <div class="cont-div">
      <div class="cont-der">房屋信息</div>
      <div class="cont-info">
        <p>姓名：{{ pageInfo.houseInfo?.ownName }}</p>
        <p>地区：{{ pageInfo.houseInfo?.region }}</p>
        <p>小区：{{ pageInfo.houseInfo?.neighborhood }}</p>
        <p v-if="props.source == 2">品类：{{ pageInfo.houseInfo?.categoryName }}</p>
        <p>装修预算：{{ pageInfo.houseInfo?.decorationBudget }}</p>
        <p>装修形式：{{ pageInfo.houseInfo?.decorationTypeText }}</p>
        <p>状态：{{ status[pageInfo.houseInfo?.status] }}</p>
      </div>
    </div>
    <div class="cont-flex">
      <div class="cont-f-div">
        <div class="cont-der">设计阶段</div>
        <p
          :style="{
            color: pageColor(
              pageInfo.designLinkInfo?.chatUserId,
              pageInfo.designLinkInfo?.companyId
            ),
          }"
        >
          装修公司名称：{{ pageInfo.designLinkInfo?.decorationCompanyName }}
        </p>
        <p
          :style="{
            color: pageColor(
              pageInfo.designLinkInfo?.chatUserId,
              pageInfo.designLinkInfo?.companyId
            ),
          }"
        >
          对接人：{{ pageInfo.designLinkInfo?.chatUserName }}
        </p>
        <p
          :style="{
            color: pageColor(
              pageInfo.designLinkInfo?.chatUserId,
              pageInfo.designLinkInfo?.companyId
            ),
          }"
        >
          联系电话：{{ pageInfo.designLinkInfo?.chatUserMobile }}
        </p>
        <p
          :style="{
            color: pageColor(
              pageInfo.designLinkInfo?.chatUserId,
              pageInfo.designLinkInfo?.companyId
            ),
          }"
        >
          签约时间：{{ pageInfo.designLinkInfo?.linkTime }}
        </p>
      </div>
      <div class="cont-f-div">
        <div class="cont-der">施工阶段</div>
        <p
          :style="{
            color: pageColor(
              pageInfo.projectManagerLinkInfo?.chatUserId,
              pageInfo.projectManagerLinkInfo?.companyId
            ),
          }"
        >
          施工阶段公司名称：{{ pageInfo.projectManagerLinkInfo?.decorationCompanyName }}
        </p>
        <p
          :style="{
            color: pageColor(
              pageInfo.projectManagerLinkInfo?.chatUserId,
              pageInfo.projectManagerLinkInfo?.companyId
            ),
          }"
        >
          对接人：{{ pageInfo.projectManagerLinkInfo?.chatUserName }}
        </p>
        <p
          :style="{
            color: pageColor(
              pageInfo.projectManagerLinkInfo?.chatUserId,
              pageInfo.projectManagerLinkInfo?.companyId
            ),
          }"
        >
          联系电话：{{ pageInfo.projectManagerLinkInfo?.chatUserMobile }}
        </p>
        <p
          :style="{
            color: pageColor(
              pageInfo.projectManagerLinkInfo?.chatUserId,
              pageInfo.projectManagerLinkInfo?.companyId
            ),
          }"
        >
          签约时间：{{ pageInfo.projectManagerLinkInfo?.linkTime }}
        </p>
      </div>
    </div>
    <div class="cont-div">
      <div class="cont-der">材料阶段</div>
      <BasePageTable
        row-key="indexs"
        :table-data="pageInfo.constructionMaterialBuyInfoList"
        :table-columns-data="tableColumnsData"
        style="margin-top: 20px"
        class="flex-1 overflow-auto"
        height="500px"
      >
        <template #companyName="{ row }">
          <span :style="{ color: pageColor(row.merchantUserId, row.companyId) }">
            {{ row.companyName }}
          </span>
        </template>
        <template #merchantUserName="{ row }">
          <span :style="{ color: pageColor(row.merchantUserId, row.companyId) }">
            {{ row.merchantUserName }}
          </span>
        </template>
        <template #merchantUserMobile="{ row }">
          <span :style="{ color: pageColor(row.merchantUserId, row.companyId) }">
            {{ row.merchantUserMobile }}
          </span>
        </template>
        <template #contractTime="{ row }">
          <span :style="{ color: pageColor(row.merchantUserId, row.companyId) }">
            {{ row.contractTime }}
          </span>
        </template>
      </BasePageTable>
    </div>
  </div>
</template>
<script setup>
import OpportunityPaymentAPI from "@/api/opportunityPayment";
import { useUserStore } from "@/store";

const userInfo = useUserStore().userInfo;
const loading = ref(false);
const status = {
  0: "未签约",
  1: "已签约",
  2: "已失效",
};
const pageInfo = ref({
  houseInfo: {},
  designLinkInfo: {},
  projectManagerLinkInfo: {},
  constructionMaterialBuyInfoList: [],
});
const props = defineProps({
  // 1 是装修知识的type固定字段 2是装修案例
  id: {
    type: [String, Number],
    required: true,
    default: "",
  },
  source: {
    type: Number,
    default: 1,
  },
});
const emit = defineEmits(["backTo"]);
const tableColumnsData = ref([
  {
    prop: "companyName",
    label: "公司名称",
    showOverflowTooltip: true,
    customSlot: "companyName",
  },
  {
    prop: "merchantUserName",
    label: "对接人",
    showOverflowTooltip: true,
    customSlot: "merchantUserName",
  },
  {
    prop: "merchantUserMobile",
    label: "联系电话",
    showOverflowTooltip: true,
    customSlot: "merchantUserMobile",
  },
  {
    prop: "contractTime",
    label: "签约时间",
    showOverflowTooltip: true,
    sortable: true,
    customSlot: "contractTime",
  },
]);
function pageColor(val, companyId) {
  if ((companyId != null && companyId == userInfo.companyId) || val == userInfo.userId) {
    return "#4080FF";
  } else {
    return "#222";
  }
}
function backTo() {
  emit("backTo");
}
async function RelationshipMap() {
  try {
    loading.value = true;
    const res = await OpportunityPaymentAPI.getRelationshipMapDetail({
      pageNum: 1,
      pageSize: 10,
      opportunityId: props.id,
      opportunitySource: props.source,
    });
    pageInfo.value = res;
    console.log(res);
  } catch (err) {
  } finally {
    loading.value = false;
  }
}
onMounted(() => {
  console.log(userInfo.userId);
  RelationshipMap();
});
</script>
<style scoped lang="scss">
.atlas {
  padding: 10px;
  position: relative;
  flex: 1;
  margin-left: 10px;
  box-sizing: border-box;
  background-color: #f2f3f5;
  padding: 10px 20px;
  min-width: 1024px;
  max-width: 2000px;

  .center-board {
    background: #fff;
    .center-title {
      position: absolute;
      left: 40px;
    }
    .action-bar {
      position: relative;
      box-sizing: border-box;
      padding: 10px 0 15px 0;
      border-bottom: 1px solid var(--el-border-color-extra-light);
      display: flex;
      align-items: center;
      justify-content: flex-end;

      u .delete-btn {
        color: #f56c6c;
      }
    }
  }
  .cont-div {
    width: 100%;
    padding: 34px 31px;
    background-color: #fff;
    margin-top: 20px;
    .cont-der {
      border-left: 4px solid #4080ff;
      padding-left: 10px;
    }
    .cont-info {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 20px;
    }
  }
  .cont-flex {
    display: flex;
    justify-content: space-between;
    .cont-f-div {
      width: 49%;
      padding: 34px 31px;
      background-color: #fff;
      margin-top: 20px;
      .cont-der {
        border-left: 4px solid #4080ff;
        padding-left: 10px;
      }
      p {
        margin-left: 8px;
      }
    }
  }
}
</style>
